# VSCode integration

To improve the workflow for managing messages right from your code editor, you can use an extension for VSCode that includes support for `next-intl`.

<video className="my-8" loop controls muted src="/i18n-ally-demo.mp4" />

These extensions are known to support `next-intl`:

1. [i18n Ally](#i18n-ally)
2. [Sherlock](#sherlock)

## i18n Ally [#i18n-ally]

**Features:**

- Message extraction
- Inline annotations
- Inline message editing
- [Machine translations](https://github.com/lokalise/i18n-ally/wiki/Machine-Translation)
- An [editor UI](https://github.com/lokalise/i18n-ally/wiki/Editor-UI) that provides a file-based system for annotating messages & reviews

**Setup:**

1. Install [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally)
2. Configure the extension in your project via [workspace settings](https://code.visualstudio.com/docs/getstarted/settings#_workspace-settings)

```json filename=".vscode/settings.json"
"i18n-ally.localesPaths": ["./path/to/your/messages"], // E.g. "./messages"
"i18n-ally.keystyle": "nested"
```

## Sherlock [#sherlock]

**Features:**

- Message extraction
- Inline annotations
- Inline message editing
- [Message linting](https://inlang.com/m/r7kp499g/app-inlang-ideextension#message-linting?ref=next-intl)
- Integration with other parts of the inlang ecosystem like [the Fink editor](https://inlang.com/m/tdozzpar/app-inlang-editor?ref=next-intl) or [the inlang CLI](https://inlang.com/m/2qj2w8pu/app-inlang-cli?ref=next-intl)

**Setup:**

1. Install the [Sherlock VS Code extension](https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension)
2. Configure the extension in your project via `project.inlang/settings.json`:

```json filename="project.inlang/settings.json"
{
  "$schema": "https://inlang.com/schema/project-settings",
  "sourceLanguageTag": "en",
  "languageTags": ["en", "de"],
  "modules": [
    "https://cdn.jsdelivr.net/npm/@inlang/plugin-next-intl@latest/dist/index.js"
  ],
  "plugin.inlang.nextIntl": {
    "pathPattern": "./messages/{languageTag}.json"
  }
}
```

Learn more in the inlang docs: [Setting up next-intl with the Sherlock extension](https://inlang.com/g/hhfueysj/guide-nilsjacobsen-nextIntlIdeExtension?ref=next-intl)
